<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:>
<head>
    <meta  http-equiv="Content-Type" content="text/html;" charset="UTF-8">
    <title>详情页</title>
    <title></title>
    <script th:src="@{/js/jquery1.9.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/js/js.js}" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/scss/shop.css}" />
    <link rel="stylesheet" th:href="@{/scss/header.css}" />
    <link type="text/css"  rel="stylesheet"  th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}">
    <link type="text/css"  rel="stylesheet"  th:href="@{/bootstrap-treeview/bootstrap-treeview.min.css}">
    <link type="text/css"  rel="stylesheet" th:href="@{/bootStrap-addTabs/bootstrap.addtabs.css}">
    <link type="text/css"  rel="stylesheet" th:href="@{/bootstrap-table/bootstrap-table.css}">
    <link type="text/css"  rel="stylesheet" th:href="@{/bootstrap-fileinput/css/fileinput.min.css}">
    <link type="text/css"  rel="stylesheet" th:href="@{/content/toastr/toastr.scss}"/>
    <link type="text/css"  rel="stylesheet" th:href="@{/content/toastr/toastr.min.css}"/>
    <link type="text/css"  rel="stylesheet" th:href="@{/bootstrap-switch/bootstrap-switch.css}"/>

    <link type="text/css"  rel="stylesheet" th:href="@{/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css}"/>

    <script type="text/javascript" th:src="@{/jquery-2.1.4.min.js}"></script>
    <script type="text/javascript"  th:src="@{/jquery.form.js}"></script>
    <script type="text/javascript"  th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
    <script type="text/javascript"   th:src="@{/bootstrap-treeview/bootstrap-treeview.min.js}"></script>
    <script type="text/javascript"  th:src="@{/bootStrap-addTabs/bootstrap.addtabs.min.js}"></script>
    <script type="text/javascript"  th:src="@{/bootstrap-table/bootstrap-table.js}"></script>
    <script type="text/javascript"  th:src="@{/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
    <script type="text/javascript"  th:src="@{/bootstrap-fileinput/js/fileinput.min.js}"></script>
    <script type="text/javascript"  th:src="@{/bootstrap-bootbox/bootbox.js}"></script>
    <script type="text/javascript"  th:src="@{/bootstrap-fileinput/js/locales/zh.js}"></script>
    <script type="text/javascript"  th:src="@{/content/toastr/toastr.min.js}"></script>
    <script type="text/javascript"  th:src="@{/bootstrap-switch/bootstrap-switch.js}"></script>

    <script type="text/javascript"  th:src="@{/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js}"></script>
</head>
<body>
<form>
    <div id="max" >
        <div class="container">
            <div class="row"  >
                <img class="center-block" alt="" >
                <ul class="nav nav-pills" >
                    <li role="presentation">
                        <img  th:src="@{/img/mai1.png}" style="width: 40px;height: 40px;"  class="img-circle">
                    </li>
                    <li role="presentation"><a href="#">北京</a></li>
                    <li role="presentation" style="float:right;"><a href="#">热线电话 400-697-9070</a></li>
<!--                    <li role="presentation" style="float:right;"><a href="#">毛豆新车</a></li>-->
<!--                    <li role="presentation" style="float:right;"><a th:href="@{/details/clause.html}">西瓜金融</a></li>-->
                    <li role="presentation" style="float:right;">
                        <a  data-toggle="modal" class="downmenu-link" data-target="#login" href="#"  onclick="sellCar()" >
                            我要卖车</a>
                    </li>
                    <li role="presentation" style="float:right;"><a href="#" onclick="PurchaseCar()">我要买车</a></li>
                    <li role="presentation" class="active" style="float:right;"><a  th:href="@{/usedCar/queryUsedCarListHome}">首页</a></li>
                </ul>
            </div>
        </div>

    </div>

    <div class="crumb-wrap" style="background-color: white;height: 50px;">
        <div class="nav flex-column justify-content-center bg-light text-center text-success col-sm-6 " style="float: right;text-align:center" >
            车源号: HC-124420344
        </div>
    </div>
    <div class="Shop" id="showGood">
        <div class="box">
            <div class="box-one ">
                <div class="col-sm-6" style="float: left" >

                    <div id="myCarousel" class="carousel slide"  >
                        <!-- 轮播（Carousel）指标 -->
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                        </ol>
                        <!-- 轮播（Carousel）项目 -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <!--图片引用绝对路径，相对路径会出错-->
                                <img th:src="@{/img/a.jpg}"  style="width: 100%;height: 420px;" alt="First slide">
                            </div>
                            <div class="item">
                                <!--图片引用绝对路径，相对路径会出错-->
                                <img th:src="@{/img/c.jpg}"  style="width: 100%;height: 420px;" alt="First slide">
                            </div>
                            <div class="item">
                                <!--图片引用绝对路径，相对路径会出错-->
                                <img th:src="@{/img/d.jpg}"  style="width: 100%;height: 420px;" alt="First slide">
                            </div>
                        </div>
                        <!-- 轮播（Carousel）导航 -->
                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span></a>
                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 col-sm-6" >
                    <div class="thumbnail" style="color: black;font-size: 25px;" >
                        <div class="caption">
                            <span th:text="${vo.usedCarName}"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3 ">
                            <div class="thumbnail">
                                <div class="caption">
                                    <h4 style="color: black" th:text="${#dates.format(vo.usedCarRegistrationTime,'yyyy/MM')}">2023-02</h4>
                                    <h5 style="color: #9d9d9d" >上牌时间</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3 ">
                            <div class="thumbnail">
                                <div class="caption">
                                    <h4 style="color: black" >
                                        <span th:text="${vo.usedCarMileage}"></span>万公里</h4>
                                    <h5 style="color: #9d9d9d">表显里程</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3 ">
                            <div class="thumbnail">
                                <div class="caption">
                                    <h4 style="color: black" >
                                        <span th:text="${vo.usedCarDisplacement}"></span>L</h4>
                                    <h5 style="color: #9d9d9d">排量</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3 ">
                            <div class="thumbnail">
                                <div class="caption">
                                    <h4 style="color: black" >
                                        <span th:if="${vo.usedCarGearbox==1}">手动</span>
                                        <span th:if="${vo.usedCarGearbox==2}">自动</span>
                                    </h4>
                                    <h5 style="color: #9d9d9d">变数箱</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="caption">
                            到手价<br>
                            <span style="color: red;font-size: 30px;" >

                          <span th:text="${vo.usedCarHandSale}">39.64</span>  万
                        </span>
                        </div>
                    </div>
                    <div class="col-sm-12" >
                        <ul class="list-group" style="background-color: rgba(92,209,124,0.28)">
                            <li class="list-group-item" >
                            <span style="color: #00AA66">首付
                                <span th:text="${vo.usedCarDownPayment}">3.96万</span>起</span>
                            </li>
                            <a href="#" class="list-group-item">
                                <span class="glyphicon glyphicon-flash" aria-hidden="true" style="color: red"></span>
                                <span style="color: black">在线分期秒批，最高可分期</span>
                                <span style="color: red">50万</span>
                            </a>
                        </ul>
                    </div>
                    <div class="col-sm-12" >
                        <ul class="list-group" style="background-color: rgba(92,209,124,0.28)">
                            <li class="list-group-item" >
                                <span style="color: #00AA66">售后保障</span>
                                <br>
                                <br>
                                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true" style="color: rgba(241,222,18,0.28)"></span>
                                <span>7天无理由退车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true" style="color: rgba(248,208,0,0.28)"></span>
                                <span>30天全面保修&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true" style="color: rgba(241,204,0,0.28)"></span>
                                <span>重大事故 | 火烧 | 泡水终...</span>
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <div>
                            <button type="button" class="btn btn-default" style="background-color: #00AA66;"   onclick="gouMai()">
                                <span style="color: white;font-size: 30px" >&nbsp;&nbsp;&nbsp;立即购买 &nbsp;&nbsp;&nbsp;</span>
                                <input type="hidden" th:value="${vo.usedCarId}"  id="carId">
                            </button>
<!--                                <a href="./index.html">立即购买</a>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="thumbnail" style="color: black;font-size: 25px;" >
                <div class="caption">
                    <h3 >
                        <span th:text="${vo.usedCarName}"></span> 基本信息</h3>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="thumbnail" style="color: black;font-size: 15px;" >
                <div class="caption">

                    <span th:text="${vo.usedCarDescribe}"></span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2 ">
                <div class="thumbnail">
                    <div class="caption">
                        <h4 style="color: black" th:text="${#dates.format(vo.usedCarRegistrationTime,'yyyy/MM')}">2023-02</h4>
                        <h5 style="color: #9d9d9d">首次上牌</h5>
                    </div>
                </div>
            </div>
            <div class="col-sm-2 ">
                <div class="thumbnail">
                    <div class="caption">
                        <h4 style="color: black">
                            <span th:text="${vo.usedCarMileage}"></span>万公里
                        </h4>
                        <h5 style="color: #9d9d9d">表显里程</h5>
                    </div>
                </div>
            </div>
            <div class="col-sm-2 ">
                <div class="thumbnail">
                    <div class="caption">
                        <h4 style="color: black">国六b</h4>
                        <h5 style="color: #9d9d9d">可迁北京</h5>
                    </div>
                </div>
            </div>
            <div class="col-sm-2 ">
                <div class="thumbnail">
                    <div class="caption">
                        <h4 style="color: black">
                            <span th:text="${vo.usedCarTaxPrice}"></span>万
                        </h4>
                        <h5 style="color: #9d9d9d">新车含税价</h5>
                    </div>
                </div>
            </div>
            <div class="col-sm-2 ">
                <div class="thumbnail">
                    <div class="caption">
                        <h4 style="color: black" >
                            <span th:text="${vo.usedCarTranShip}"></span>
                            次</h4>
                        <h5 style="color: #9d9d9d">过户次数</h5>
                    </div>
                </div>
            </div>
            <div class="col-sm-2 ">
                <div class="thumbnail">
                    <div class="caption">
                        <h4 style="color: black">
                            <span th:text="${vo.usedCarDisplacement}"></span>T
                        </h4>
                        <h5 style="color: #9d9d9d">排量</h5>
                    </div>
                </div>
            </div>
            <div class="col-sm-2 ">
                <div class="thumbnail">
                    <div class="caption">
                        <h4 style="color: black">
                            <span th:text="${vo.userCarLicensePlate}"></span>
                        </h4>
                        <h5 style="color: #9d9d9d">车牌归属地</h5>
                    </div>
                </div>
            </div>
            <div class="col-sm-2 ">
                <div class="thumbnail">
                    <div class="caption">
                        <h4 style="color: black">
                            <span th:if="${vo.usedCarGearbox==1}">手动</span>
                            <span th:if="${vo.usedCarGearbox==2}">自动</span>
                        </h4>
                        <h5 style="color: #9d9d9d">变速箱</h5>
                    </div>
                </div>
            </div>
            <div class="col-sm-2 ">
                <div class="thumbnail">
                    <div class="caption">
                        <h4 style="color: black">
                            <span th:text="${vo.usedCarColor}"></span>
                        </h4>
                        <h5 style="color: #9d9d9d">车身颜色</h5>
                    </div>
                </div>
            </div>
            <div class="col-sm-2 ">
                <div class="thumbnail">
                    <div class="caption">
                        <h4 style="color: black" th:text="${#dates.format(vo.usedCarRegistrationTime,'yyyy/MM')}">2022-05</h4>
                        <h5 style="color: #9d9d9d">出厂日期</h5>
                    </div>
                </div>
            </div>
            <div class="col-sm-2 ">
                <div class="thumbnail">
                    <div class="caption">
                        <h4 style="color: black">
                            <span th:text="${vo.usedCarKeyCount}"></span>
                            把
                        </h4>
                        <h5 style="color: #9d9d9d">钥匙数量</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="thumbnail" style="color: black;font-size: 25px;" >
                <div class="caption">
                    <h3 >
                        <span th:text="${vo.usedCarName}"></span> 车辆图片</h3>
                </div>
            </div>
        </div>
        <div class="col-sm-12" style="align-content: center">
            <div class="thumbnail" style="color: black;" >
                <div class="caption" >
                    <h4 style="text-align: center">
                        车辆外观</h4>
                </div>
            </div>
        </div>
        <div class="imgbox" th:each="img: ${vo.imgs}">
            <div class="caption">
                <ul>
                    <li>
                        <img  th:src="${img}"class="col-sm-6" alt="Cinque Terre" width="610" height="320" >
                    </li>

                </ul>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="thumbnail" style="color: black;font-size: 25px;" >
                <div class="caption">
                    <h3 >
                        <span th:text="${vo.usedCarName}"></span> 检测报告</h3>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <ul class="nav  nav-pills nav-stacked">
                <li role="presentation" >
                    <a >
                        车辆外观检测
                        <span class="glyphicon glyphicon-ok" aria-hidden="true" style="color: green;float: right"></span>
                    </a>
                </li>
                <li role="presentation">
                    <a >
                        内饰功能检测
                        <span class="glyphicon glyphicon-ok" aria-hidden="true" style="color: green;float: right"></span>
                    </a>
                </li>
                <li role="presentation">
                    <a >
                        底盘悬架检测
                        <span class="glyphicon glyphicon-ok" aria-hidden="true" style="color: green;float: right"></span>
                    </a>
                </li>
                <li role="presentation">
                    <a >
                        发动机舱检测
                        <span class="glyphicon glyphicon-ok" aria-hidden="true" style="color: green;float: right"></span>
                    </a>
                </li>
                <li role="presentation">
                    <a >
                        动态路试检测
                        <span class="glyphicon glyphicon-ok" aria-hidden="true" style="color: green;float: right"></span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="row col-sm-8">
            <div class="col-sm-4">
                <img  th:src="@{/img/ma.jpg}"  style="float:right;">
            </div>
            <div class="col-sm-6">
                <h3>微信扫码查看完整检测报告</h3><br>
                <h4>
                    <img  th:src="@{/img/l1.jpg}"  class="img-circle">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    打开微信
                </h4><br>
                <h4>
                    <img  th:src="@{/img/l2.jpg}"  class="img-circle">
                    &nbsp;&nbsp;&nbsp;&nbsp;点击页面右上角“+”号，打开扫一扫
                </h4>
            </div>
        </div>
    </div>
    <div class="headera">
        <div class="table">
            <dl>
                <dt><a href="##">购物指南</a></dt>
                <dd>
                    <a href="##">购物流程</a>
                </dd>
                <dd>
                    <a href="##">会员介绍</a>
                </dd>
                <dd>
                    <a href="##">生活旅行/团购</a>
                </dd>
                <dd>
                    <a href="##">常见问题</a>
                </dd>
                <dd>
                    <a href="##">大家电</a>
                </dd>
                <dd>
                    <a href="##">练习客服</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="##">配送方式</a></dt>
                <dd>
                    <a href="##">上门自提</a>
                </dd>
                <dd>
                    <a href="##">211限时达</a>
                </dd>
                <dd>
                    <a href="##">配送服务查询</a>
                </dd>
                <dd>
                    <a href="##"></a>
                </dd>
                <dd>
                    <a href="##">海外配送</a>
                </dd>
                <dd></dd>
            </dl>
            <dl>
                <dt><a href="##">支付方式</a></dt>
                <dd>
                    <a href="##">货到付款</a>
                </dd>
                <dd>
                    <a href="##">在线支付</a>
                </dd>
                <dd>
                    <a href="##">分期付款</a>
                </dd>
                <dd>
                    <a href="##">邮局汇款</a>
                </dd>
                <dd>
                    <a href="##">公司转账</a>
                </dd>
                <dd></dd>
            </dl>
            <dl>
                <dt><a href="##">售后服务</a></dt>
                <dd>
                    <a href="##">售后政策</a>
                </dd>
                <dd>
                    <a href="##">价格保护</a>
                </dd>
                <dd>
                    <a href="##">退款说明</a>
                </dd>
                <dd>
                    <a href="##">返修/退换货</a>
                </dd>
                <dd>
                    <a href="##">取消订单</a>
                </dd>
                <dd></dd>
            </dl>
            <dl class="dls">
                <dt><a href="##">特色服务</a></dt>
                <dd>
                    <a href="##">夺宝岛</a>
                </dd>
                <dd>
                    <a href="##">DIY装机</a>
                </dd>
                <dd>
                    <a href="##">延保服务</a>
                </dd>
                <dd>
                    <a href="##">西瓜E卡</a>
                </dd>
                <dd>
                    <a href="##">西瓜通信</a>
                </dd>
                <dd>
                    <a href="##">西瓜XG</a>
                </dd>
            </dl>
        </div>
        <!--关于我们-->
        <div class="guanyuwomen">
            <ul>
                <li>
                    <a href="##">关于我们</a>
                </li>
                <li>|</li>
                <li>
                    <a href="##">联系我们</a>
                </li>
                <li>|</li>
                <li>
                    <a href="##">联系客服</a>
                </li>
                <li>|</li>
                <li>
                    <a href="##">合作招商</a>
                </li>
                <li>|</li>
                <li>
                    <a href="##">商家帮助</a>
                </li>
                <li>|</li>
                <li>
                    <a href="##">营销中心</a>
                </li>
                <li>|</li>
                <li>
                    <a href="##">西瓜买车</a>
                </li>
                <li>|</li>
                <li>
                    <a href="##">友情链接</a>
                </li>
                <li>|</li>
                <li>
                    <a href="##">销售联盟</a>
                </li>
                <li>|</li>
                <li>
                    <a href="##">西瓜社区</a>
                </li>
                <li>|</li>
                <li>
                    <a href="##">风险检测</a>
                </li>
                <li>|</li>
                <li>
                    <a href="##">隐私政策</a>
                </li>
                <li>|</li>
                <li>
                    <a href="##">西瓜公益</a>
                </li>
                <li>|</li>
                <li>
                    <a href="##">English Site</a>
                </li>
                <li>|</li>
                <li>
                    <a href="##">Mdeila $ IR</a>
                </li>
            </ul>
        </div>
        <!--jieshoa-->
        <p class="p1"><img th:src="@{/img/1.jpg}" />
            <a href="##"> 京公网安备11010802020161号</a>|
            <a href="##"> 车好多旧机动车经纪（北京）有限公司</a>|
            <a href="##">北京市丰台区南四环中路260号北京新发地汽车交易市场旧车经营区B区178号</a>|
            <a href="##">010-57317000</a>
        </p>
        <p class="p1">
            <a href="##"> 互联网出版许可证编号新出网证(京)字150号</a>|
            <a href="##"> 出版物经营许可证</a>|
            <a href="##"> 网络文化经营许可证京网文 </a>|
            <a href="##">[2014]2148-348号 </a>|
            <a href="##"> 违法和不良信息举报电话 </a>|
            <a href="##">：4006561155 </a>
        </p>
        <p class="p1">
            <a href="##"> Copyright © 2004-2017 西瓜xg.com 版权所有</a>|
            <a href="##"> 消费者维权热线：4006067733 经营证照</a>|
        </p>
    </div>
    <div class="Fixedbian">
        <ul>
            <li class="li1"><a class="aaa" href="##">顶部</a></li>
        </ul>
    </div>
    <div class="gouwuchexiaguo">
        <img src="img/44.png" />
        <span>购物车还没有商品，赶紧选购吧！</span>
    </div>
</form>
</body>
<script type="text/javascript">

    function carShow(){

    }


    //我要卖车
    function sellCar() {
        location.href="http://localhost:9002/usedCar/details";
    }

    //我要买车
    function PurchaseCar() {
        location.href="http://localhost:9002/buy/searchHome";
    }

    /*跳转订单*/
    function gouMai(){
      var carId=  $("#carId").val()
       window.location.href="http://localhost:9006/order/index?carId="+carId;
    }
</script>

</html>